<template>
  <div id="mse"></div>
</template>

<script lang="ts">
import { onMounted } from "vue";
import Player from 'xgplayer'

export default {
  setup(): any {
    onMounted(() => {
      ///////////////////////////////////////xgplayer/////////////////////////////////////////////////
      const player = new Player({
        id: 'mse',
        autoplay: false,
        // width: 700,
        // height:400,
        url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
        poster: "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        // fluid: deviceDetection() ? true : false,
        controlsList: ['nodownload','nofullscreen','noremoteplayback'],
        definitionActive: 'click',
        volume: 0.2,
        rotate: {   //video rotate config
          innerRotate: true, //only ratate inner video
          clockwise: false // rotate direction is clockwise or anticlockwise
        },
        thumbnail: {
          pic_num: 44,
          width: 160,
          height: 90,
          col: 10,
          row: 10,
          urls: ['https://tva2.sinaimg.cn/crop.0.2.508.508.180/49484637jw8f4b71ivbjyj20e40e8jrk.jpg?KID=imgbed,tva&Expires=1621021991&ssig=ZkESNkfu9u','https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1456928635.64.webp'],
        },playNextBtn: {
          urlList: [
            'url1',
            'url2',
            'url3'
          ],
        },
        download:true,
        airplay: true,
        playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
      })

      player.on('rotate',function(deg) {
        console.log(deg);
      })
      player.emit('resourceReady', [{name: '高清', url: 'url1'}, {name: '超清', url: 'url2'}])
    })
  }
}
</script>

<style scoped lang="scss">
#mse {
  flex: auto;
}
</style>
